diff options
Diffstat (limited to 'src/app/anime/[id]/buttons.jsx')
| -rw-r--r-- | src/app/anime/[id]/buttons.jsx | 153 |
1 files changed, 0 insertions, 153 deletions
diff --git a/src/app/anime/[id]/buttons.jsx b/src/app/anime/[id]/buttons.jsx deleted file mode 100644 index c1b4615..0000000 --- a/src/app/anime/[id]/buttons.jsx +++ /dev/null @@ -1,153 +0,0 @@ -"use client";
-
-import styles from "./info.module.css";
-import { useState, useEffect } from "react";
-import { fetch_video_link } from "../videoLinkfetcher";
-import { MediaPlayer, MediaProvider } from "@vidstack/react";
-import "@vidstack/react/player/styles/default/theme.css";
-import "@vidstack/react/player/styles/default/layouts/video.css";
-import {
- defaultLayoutIcons,
- DefaultVideoLayout,
-} from "@vidstack/react/player/layouts/default";
-import { storeLocal } from "../history/storeData";
-
-export default function Button({ data2: info }) {
- const currentDate = new Date();
- const [videoLink, setVideoLink] = useState(null);
- const [buttonGroups, setButtonGroups] = useState(null);
-
- useEffect(() => {
- create_button_group(0, 50);
- }, []);
-
- const groups = createGroups(info.episodes, 50);
-
- async function video(id) {
- const link = await fetch_video_link(id);
- if (link === undefined) {
- alert("Sorry, but not links were found");
- } else {
- setVideoLink(link);
- }
- }
-
- function createGroups(array, size) {
- const groups = [];
- for (let i = 0; i < array.length; i += size) {
- groups.push(array.slice(i, i + size));
- }
- return groups;
- }
-
- function store_to_local(name, image, episode, id) {
- let newData = {
- name: name,
- image: image,
- episode: episode,
- id: id,
- type: "anime",
- date: `${currentDate.getDate()}-${String(
- currentDate.getMonth() + 1
- ).padStart(2, "0")}`,
- time: `${currentDate.getHours()}:${String(
- currentDate.getMinutes()
- ).padStart(2, "0")}`,
- };
- storeLocal(newData);
- }
-
- function create_button_group(start, end) {
- setButtonGroups(
- <div className={styles.buttonContainer}>
- {info.episodes &&
- info.episodes.slice(start, end).map((item, index) => (
- <button
- className={styles.dramaButton}
- key={index}
- onClick={(event) => {
- event.target.style.backgroundColor =
- "var(--soft-purple)";
- video(item.id);
- store_to_local(
- info.title,
- info.image,
- item.number,
- info.id
- );
- }}
- >
- {item.number}
- </button>
- ))}
- </div>
- );
- }
-
- function handleSelectChange(event) {
- const selectedIndex = event.target.selectedIndex;
- const selectedGroup = groups[selectedIndex];
- if (selectedGroup) {
- create_button_group(
- selectedGroup[0].number - 1,
- selectedGroup[selectedGroup.length - 1].number
- );
- }
- }
-
- return (
- <main>
- <h2 className={styles.buttonHeader}>Episodes: </h2>
- {info.episodes && (
- <select
- onChange={(event) => handleSelectChange(event)}
- className={styles.SelectClass}
- >
- {groups &&
- groups.map((item, index) => (
- <option key={index}>
- {item[0].number} -{" "}
- {item[item.length - 1].number}
- </option>
- ))}
- </select>
- )}
- {buttonGroups}
- {videoLink && (
- <div
- className={styles.videoPopUp}
- id="popup"
- onKeyDown={(event) => {
- if (event.code === "Escape") {
- setVideoLink("");
- }
- }}
- >
- <div className={styles.video}>
- <MediaPlayer
- title="dramaPlayer"
- src={videoLink}
- aspectRatio="16/9"
- load="eager"
- className={styles.VideoPlayer}
- playsInline
- id="videoPlayer"
- volume={0.8}
- >
- <MediaProvider />
- <DefaultVideoLayout icons={defaultLayoutIcons} />
- </MediaPlayer>
- <button
- className={styles.closeButton}
- onClick={() => {
- setVideoLink("");
- }}
- >
- Close
- </button>
- </div>
- </div>
- )}
- </main>
- );
-}
|